import React from 'react';
import { Layout, Row, Col, Form, Input, Button, Checkbox } from 'antd';
import './App.css';

const axios = require('axios');
const { Header, Footer, Content } = Layout;

const App = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
    axios.post('https://service-pl3zp5gt-1256551206.sh.apigw.tencentcs.com/release/comment', values)
    .then(function (response) {
      console.log("本地接收到了远程服务器的请求：");
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Layout>
      <Header>Header</Header>
      <br /><br /><br />
      <Content>
        <Row>
          <Col span={18}>
            <Form
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="Username"
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </Content>
      <br /><br /><br />
      <Footer>© 2021 Zhang Ning Net</Footer>
    </Layout>
    
  );
};

export default App;